<template>
  <div ref="detailBox" class="sdy-detail-box">
    <!-- 轮播图 -->
    <SdyDetailBanner :list="goodsInfo.banners"/>

    <!-- 详细信息 -->
    <div class="sdy-detail">
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
      <p class="price">
        {{ goodsInfo.originprice }}
      </p>
    </div>

    <!-- 底部导航栏 -->
    <div class="sdy-detail-footer">
      <van-action-bar>
        <van-action-bar-icon icon="shop-o" text="店铺" />
        <van-action-bar-icon icon="chat-o" text="客服" />
        <van-action-bar-icon to="/cart" icon="cart-o" text="购物车" />
        <van-action-bar-button @click="addCartHandler" type="warning" text="加入购物车" />
        <van-action-bar-button type="danger" text="立即购买" />
      </van-action-bar>
    </div>

    <!-- 顶部通栏 -->
    <div ref="detailHeader" class="sdy-detail-header">
      顶部通栏
    </div>
  </div>
</template>

<script name="sdyDetail" lang="ts" setup>
import { useRoute } from 'vue-router'
import { onMounted, ref } from 'vue'
import { getGoodsDetailHandler } from '../../model/goods'
import SdyDetailBanner from './components/banner.vue'
import { showSuccessToast, showFailToast } from 'vant'
import { addCartHadnler } from '../../model/carts'

// 拿到当前路由的信息
const $myRoute = useRoute()

// 准备一个变量, 保存商品详细信息
const goodsInfo = ref({ banners: [] })

// 请求商品详细信息
const getGoodsDetail = async () => {
  const proid = $myRoute.query.proid
  const res = await getGoodsDetailHandler(proid as string)
  if ((res as any).code !== '200') return
  res.data.banners = []
  res.data.banners.push(res.data.img1, res.data.img2, res.data.img3, res.data.img4)
  goodsInfo.value = res.data
  console.log(res.data)
}

// 拿到当前盒子
const detailBox = ref()
const detailHeader = ref()

// 准备一个滚动事件的事件处理函数
const scrollHandler = () => {
  console.log('你好 世界')
  // 拿到盒子卷去的高度
  const scrollTop = detailBox.value.scrollTop
  // 拿到元素
  const ele = detailHeader.value

  // 判断 scrollTop 在 0 ~ 200 之间的变化
  // 判断出现和隐藏
  // scrollTop === 0       opacity === 0
  // scrollTop === 100     opacity === ?(0.5)
  // scrollTop === 200     opacity === 1
  if (scrollTop < 200) {
    const opacity: number = scrollTop / 200
    ele.style.opacity = opacity
  } else {
    ele.style.opacity = 1
  }
}

// 加入购物车操作
const addCartHandler = async () => {
  console.log('加入购物车')
  const proid: string = goodsInfo.value.proid
  const userid: string = window.localStorage.getItem('user_id') || ''

  // 判断
  if (!userid) {
    // 表示从来没有登录过
    // 提示用户您还没有登录
    showFailToast('您还没有登录')
    return
  }

  const res = await addCartHadnler(userid, proid, 1)
  if ((res as any).code !== '200') {
    // 提示用户您还没有登录
    showFailToast('您还没有登录')
    return
  }
  showSuccessToast('加入购物车成功')
}

onMounted(() => {
  getGoodsDetail()
  detailBox.value.addEventListener('scroll', scrollHandler)
})

</script>

<style scoped lang="scss">
.sdy-detail-box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 50px;
  overflow: auto;
  position: relative;
}

.sdy-detail-footer {
  position: fixed;
  left: 0;
  bottom: 0;
}

.sdy-detail-header {
  width: 100%;
  height: 50px;
  background-color: orange;
  position: fixed;
  left: 0;
  top: 0;
  opacity: 0;
}
</style>
